<template>
  <div class=''>
    <div class='nav-wrap'>
      <ul class='nav-list'>
        <li :class="[tabIndex===0?'active':''] "
            @click='switchTab(0)'>我的订单
          <span v-if='newOrderNumber>0'>{{newOrderNumber}}</span>
        </li>
        <li :class="[tabIndex===1?'active':''] "
            @click='switchTab(1)'>已完成</li>
        <li :class="[tabIndex===2?'active':''] "
            @click='switchTab(2)'>取消订单</li>
      </ul>
    </div>
    <div class='order-conent'>
      <ul class='order-list'
          v-if='orderData&&orderData.length'>
        <li v-for='(item,index) in orderData'
            @click="goTo('/pages/order/orderDetail?id='+item.DB_INDEX)"
            :key='index'>
          <div><span>单号 ：</span> {{item.DB_DanHao}} </div>
          <div><span>日期 ：</span>{{item.DB_LuRuRiQiStr}} </div>
          <div><span>客户 ：</span>【{{item.KH_bianHao}}】{{item.KHname}}</div>
          <div><span>账号 ：</span>{{item.WEBAccount}}</div>
          <div>
            <span>地址 ：</span>
            {{item.DB_address}}
          </div>
          <div v-if='item.WuLiu'>
            <span>物流 ：</span>
            {{item.WuLiu}}
          </div>
          <div class='btn'
               v-if='false'>
            <div>取消订单</div>
            <div class='confirm-btn'>确认收货</div>
          </div>
          <div class='symbol'>
            <img src="/static/image/icon-xindan@2x.png"
                 alt="新单"
                 v-if="item.ZT=='新单'">
            <img src="/static/image/icon-wancheng@2x.png"
                 v-if="item.ZT=='完成'"
                 alt="完成">
            <img src="/static/image/icon-jujue@2x.png"
                 v-if="item.ZT=='拒绝'"
                 alt="拒绝">
            <img src="/static/image/icon-songdao@2x.png"
                 v-if="item.ZT=='送到'"
                 alt="送到">
            <img src="/static/image/icon-paidan@2x.png"
                 v-if="item.ZT=='派单'"
                 alt="派单">
            <img src="/static/image/icon-shenhe@2x.png"
                 v-if="item.ZT=='审核'"
                 alt="审核">

            <img src="/static/image/icon-zaitu@2x.png"
                 v-if="item.ZT=='在途'"
                 alt="在途">
            <img src="/static/image/icon-qxdd@2x.png"
                 v-if="item.ZT=='取消'"
                 alt="取消">

          </div>
        </li>
      </ul>
      <div v-else>
        <default-none :text="'暂无相关订单'"></default-none>
      </div>
    </div>
  </div>
</template>

<script>
import { OrdersLiteapp } from '@/api/api'
import defaultNone from '@/components/defaultNone'
export default {
  data () {
    return {
      tabIndex: 0,
      orderData: null,
      newOrderNumber: 0
    }
  },

  components: {
    defaultNone
  },

  computed: {},

  onShow () {
    this.getOrdersLiteapp()
  },

  methods: {
    switchTab (index) {
      if (this.tabIndex === index) { return false }
      this.tabIndex = index
      this.getOrdersLiteapp()
    },
    async getOrdersLiteapp () {
      let zt = 1
      switch (this.tabIndex) {
        case 0:
          zt = 1
          break
        case 1:
          zt = 3
          break
        default:
          zt = -1
          break
      }
      this.orderData = null
      let orderData = await OrdersLiteapp(zt)
      let num = 0
      for (let key of orderData) {
        if (key.DB_ZT === 1) {
          num += 1
        }
      }
      if (zt === 1) {
        this.newOrderNumber = num
      }
      this.orderData = orderData
    },
    goTo (url) {
      this.$wx.navigator(url)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/common/scss/base.scss';
.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  .nav-list {
    display: flex;
    background: #fff;
    @include border-bottom($lineColor);
    li {
      @include fjc(center);
      @include fontSize(28);
      width: 33.3%;
      height: 88px;
      color: #898889;
      position: relative;
      span {
        position: absolute;
        background: #ff5757;
        border-radius: 100%;
        top: 16px;
        right: 54px;
        color: #fff;
        @include fontSize(20);
        @include wh(30, 30);
        @include fjc(center);
      }
    }
    .active {
      color: $primaryColor;
      &::after {
        @include center(-50%, -100%, 50%, 100%);
        content: '';
        height: 4px;
        width: 112px;
        background: $primaryColor;
      }
    }
  }
}
.order-conent {
  padding-top: 88px;
  .order-list {
    li {
      margin-bottom: 12px;
      padding: 24px;
      padding-bottom: 0;
      background: #fff;
      position: relative;
      > div {
        @include color111;
        @include fontSize(28);
        @include fjc(flex-start);
        padding-bottom: 24px;
        span {
          @include color666;
          white-space: nowrap;
          display: flex;
          align-self: flex-start;
          min-width: 90px;
        }
      }
      > .btn {
        @include fjc(flex-end);
        @include border-top($lineColor);
        padding: 12px 0;
        > div {
          @include wh(128, 48);
          @include fjc(center);
          @include fontSize(28);
          @include border-all(#979797);
          color: #898989;
          margin-left: 24px;
          border-radius: 8px;
        }
        .confirm-btn {
          @include border-all($primaryColor);
          background: $primaryColor;
          color: #fff;
        }
      }
      .symbol {
        position: absolute;
        right: 30px;
        top: 0;
        img {
          @include wh(56, 62);
        }
      }
    }
  }
}
</style>